<template>
    <van-nav-bar title="错题详情" left-text="返回" left-arrow @click-left="toback" />
    <img :src="newitem.img1" alt="">
    <van-button type="primary" size="small" class="daan" @click="todaan">查看解析</van-button>
    <van-action-sheet v-model:show="show" title="答案解析">
        <div class="content">
            <div class="wen">【答案】</div>
            <img :src="newitem.daan" alt="" class="da">
        </div>
    </van-action-sheet>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { Ref } from 'vue'

interface ICuoList {
    id: number,
    src: string,
    grade: string,
    subject: string,
    img1: string,
    daan: string,
}

const List = JSON.parse(window.localStorage.getItem('cuolist'))
const newitem = List.find(item => {
    return item.id === JSON.parse(window.localStorage.getItem('itemid'))
})
let show: Ref<boolean> = ref(false)

function toback() {
    history.back()
}

function todaan() {
    show.value = true
}
</script>

<style scoped lang="scss">
img {
    margin-top: 10px;
}

.daan {
    width: 100px;
    margin-top: 20px;
    margin-left: 240px;
}
.content {
    padding: 16px 16px 160px;
}
.da {
    width: 100%;
}
</style>